<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">


    <h:head>
        <f:facet name="first">
            <meta content='text/html; charset=UTF-8' http-equiv="Content-Type"/>
            <title>Login</title>
            <h:outputStylesheet name="css/estilos.css"/>
        </f:facet>

    </h:head>


    <h:body styleClass="fondo">
        <h:form>  
            <p:growl id="messages" showDetail="true"/>

            <p:menubar>

                <p:submenu label="Ayuda" icon="ui-icon-contact">
                    <p:menuitem value="Quienes Somos" url="#{pageContext.request.contextPath}/faces/conoscanos.html"  />
                    <p:menuitem value="Estamos Ubicados en..." url="#{pageContext.request.contextPath}/faces/Contactanos.html"  />

                </p:submenu>

                <p:menuitem value="Registrate" onclick="PF('dlg1').show()"/>
            </p:menubar>
        </h:form>

        <h:form>
            <p:panel  styleClass="login" id="display" header="Iniciar Sesión">

                <p:growl id="msgs" />

                <h:panelGrid columns="3" cellpadding="7">
                    <p:outputLabel for="firstname" value="Identificación:" />
                    <p:inputText id="firstname" value="#{Login.username}" required="true" requiredMessage="Ingrese Documento" label="Firstname"  >
                        <f:validateLength minimum="5" />

                    </p:inputText>
                    <p:message for="firstname" display="icon" />

                    <p:outputLabel for="lastname" value="Contraseña:" />
                    <p:password id="lastname" value="#{Login.password}" label="Lastname" required="true" requiredMessage="Ingrese Contraseña">
                        <f:validateLength minimum="2" />
                        <p:ajax update="msgLastname" event="keyup" />
                    </p:password>
                    <p:spacer> </p:spacer> 


                    <p:message for="lastname" id="msgLastname" display="icon" />

                </h:panelGrid>
                <h:panelGrid columns="1" style="left: 32%; margin: -4%; position: absolute">
                    <p:commandLink value="Recuperar Contraseña" onclick="PF('dlg').show()"  style="color: blue"/>
                </h:panelGrid>
                <p:commandButton styleClass="boton" value="Ingresar"  oncomplete="manejarLogin(xhr, status, args)"  update="display" actionListener="#{Login.loginUsuario}" icon="ui-icon-check" />

            </p:panel>
        </h:form>
        <h:form id="dialogo">
            <p:dialog header="Recuperar Contraseña" widgetVar="dlg" minHeight="170" height="170" modal="true">
                <p:outputLabel value="La contraseña será enviada al correo electrónico"/>
                <p:separator />
                <h:panelGrid columns="6">

                    <p:outputLabel id="IdentificacionLabel" value="Identificación:  "/>
                    <p:inputText id="Identificacion" value="#{Login.username}"/>           
                    <p:outputLabel for="preguntal" value="Pregunta:  "/>
                    <p:selectOneMenu id="preguntal" value="#{Login.preguntaObjeto}"  >
                        <f:selectItems value="#{preguntasController.itemsAvailableSelectOne}"/>
                    </p:selectOneMenu>
                    <p:outputLabel id="RespuestaLabel" value="Respuesta:  "/>
                    <p:password id="Respuesta" value="#{Login.respuesta}"/>
                    <p:spacer></p:spacer>
                    <p:spacer></p:spacer>
                    <h:commandButton value="Recuperar"   styleClass="buttonmain"  action="#{Login.recuperarClave()}" />
                </h:panelGrid>
            </p:dialog>
        </h:form>

        <h:form id="form">
            <p:growl id="Msn" />
            <p:dialog header="Registrarse" widgetVar="dlg1" minHeight="340" height="340" modal="true">
                <p:outputLabel value="Los campos con * son Obligatorios"/>
                <p:separator />
                <h:panelGrid columns="6" id="panel">
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_identificacion}" for="identificacion" />
                    <p:inputText maxlength="25" id="identificacion" value="#{usuariosController.selected.identificacion}" title="#{bundle.CreateUsuariosTitle_identificacion}" required="true"  requiredMessage="#{bundle.CreateUsuariosRequiredMessage_identificacion}" >
                        <f:validateLength minimum="0" />
                    </p:inputText>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_tipodocumento}" for="tipodocumento" />
                    <p:selectOneMenu id="tipodocumento" value="#{usuariosController.selected.tipodocumento}" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_tipodocumento}">
                        <f:selectItems value="#{tiposdocumentoController.itemsAvailableSelectOne}"/>
                    </p:selectOneMenu>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_nombre}" for="nombre" />
                    <p:inputText maxlength="25" id="nombre" value="#{usuariosController.selected.nombre}" title="#{bundle.CreateUsuariosTitle_nombre}" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_nombre}"/>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_apellidouno}" for="apellidouno" />
                    <p:inputText maxlength="25" id="apellidouno" value="#{usuariosController.selected.apellidouno}" title="#{bundle.CreateUsuariosTitle_apellidouno}" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_apellidouno}"/>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_apellidodos}" for="apellidodos" />
                    <p:inputText maxlength="25" id="apellidodos" value="#{usuariosController.selected.apellidodos}" title="#{bundle.CreateUsuariosTitle_apellidodos}" />
                    <h:outputLabel value="#{bundle.CreateUsuariosLabel_fechanacimiento}" for="german" />
                    <p:calendar maxlength="12" id="german" value="#{usuariosController.selected.fechanacimiento}" locale="de" navigator="true" pattern="MM/dd/yyyy" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_fechanacimiento}">

                    </p:calendar>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_correo}" for="correo" />
                    <p:inputText id="correo" value="#{usuariosController.selected.correo}" title="#{bundle.CreateUsuariosTitle_correo}" validatorMessage="Ingrese un correo Válido" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_correo}">
                        <f:validateRegex  pattern="^[_A-Za-z0-9-\+]+(\.[_A-Za-z0-9-]+)*@[A-Za-z0-9-]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$" />
                        <p:watermark for="correo" value="ejemplo@servidor.com" id="watermark8" />
                    </p:inputText>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_pregunta}" for="pregunta" />
                    <p:selectOneMenu id="pregunta" value="#{usuariosController.selected.pregunta}"  required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_pregunta}">
                        <f:selectItems value="#{preguntasController.itemsAvailableSelectOne}"/>
                    </p:selectOneMenu>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_respuesta}" for="respuesta" />
                    <p:password id="respuesta" value="#{usuariosController.selected.respuesta}" title="#{bundle.CreateUsuariosTitle_respuesta}" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_respuesta}"/>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_contrasena}" for="contrasena" />
                    <p:password id="contrasena" value="#{usuariosController.selected.contrasena}" match="contrasena2" validatorMessage="Las contraseñas no coinciden" title="#{bundle.CreateUsuariosTitle_contrasena}" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_contrasena}"/>
                    <p:outputLabel value="Repetir contraseña: *" />
                    <p:password id="contrasena2" value="#{usuariosController.selected.contrasena}" title="#{bundle.CreateUsuariosTitle_contrasena}" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_contrasena}"/>

                    

                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_genero}" for="genero" />
                    <p:selectOneMenu id="genero" value="#{usuariosController.selected.genero}" required="true" requiredMessage="#{bundle.CreateUsuariosRequiredMessage_genero}">
                        <f:selectItems value="#{generosController.itemsAvailableSelectOne}"/>
                    </p:selectOneMenu>

                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_perfil}" for="perfil" />
                    <p:selectOneMenu id="perfil" value="#{usuariosController.selected.perfil}">
                        <f:selectItems value="#{perfilesController.itemsAvailableDefault}"/>
                    </p:selectOneMenu>
                    <p:outputLabel value="#{bundle.CreateUsuariosLabel_estado}" for="estado" />
                    <p:selectOneMenu id="estado" value="#{usuariosController.selected.estado}">
                        <f:selectItems value="#{estadosController.itemsAvailableDefault}"/>
                    </p:selectOneMenu>
                    <!--<h:panelGroup rendered="false">-->
                    <!--</h:panelGroup>-->


                    <p:spacer></p:spacer>
                    <p:spacer></p:spacer>
                    <p:spacer></p:spacer>
                    <p:spacer></p:spacer>
                    <p:accordionPanel/>        
                    <p:accordionPanel/> 
                    <p:accordionPanel/>        
                    <p:accordionPanel/>
                    <p:accordionPanel/>
                    <h:commandButton  action="#{usuariosController.create}" styleClass="buttonmain" value="#{bundle.CreateUsuariosSaveLink}" />

                </h:panelGrid>
                <p:watermark for="identificacion" value="Ingrese N° Documento" id="watermark" />
                <p:watermark for="german" value="mm/dd/yyyy" id="watermark1" />
            </p:dialog>
        </h:form>

    </h:body>
    <script type="text/javascript">
        //<![CDATA[
        function manejarLogin(xhr, status, args) {
            if (!args.validationFailed && args.estaLogeado) {
                setTimeout(function() {
                    window.location = args.view;
                }, 500);
            }
        }
//]]>
    </script>


</html>
